<template>
	<view>
		<view class="top_bg">
			<view class="hos_selecter">
				<view class="l">
					<text class="tit">就诊医院：</text>
					<text class="sel_text">全部</text>
				</view>
				
				<view class="r">
					<image src="../../static/more.png" mode=""></image>
				</view>
			</view>
		</view>
		
		<view class="main">
			<view class="scan_btn">
				<image src="../../static/tiaoxingma@2x.png" mode=""></image>
				<text>扫码获取数字影像报告</text>
			</view>
			
			<view class="newuserguide">
				<view class="doctor">
					<image src="../../static/doctor.png" mode=""></image>
				</view>
				
				<view class="guide">
					<text class="tit">初次登录请您</text>
					<view class="list">
						<view class="item curr">
							<image class="i" src="../../static/listi@2x.png" mode=""></image>
							<text>绑定就诊人员</text>
						</view>
						<view class="item"><text>接收报告通知</text></view>
						<view class="item"><text>获取历史影像</text></view>
						<view class="item"><text>……</text></view>
					</view>
				</view>
			</view>
		</view>

		<u-tabbar v-model="current" :list="list" :mid-button="true" height="110"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						iconPath: "../../static/home@2x.png",
						selectedIconPath: "../../static/home@2x.png",
						text: '首页',
						customIcon: false,
					},
					{
						iconPath: "../../static/add@2x.png",
						selectedIconPath: "../../static/add@2x.png",
						text: '添加就诊人',
						midButton: true,
						customIcon: false,
					},
					{
						iconPath: "../../static/my@2x.png",
						selectedIconPath: "../../static/my@2x.png",
						text: '我的',
						customIcon: false,
					},
				],
				current: 0
			}
		},
	}
</script>

<style lang="scss">
.top_bg {
	height: 257rpx;
	background-color: blue;
	padding-top: 30rpx;
	background-image: url(../../static/top_bg@2x.png);
	background-position: center;
	background-size: cover;
}

.hos_selecter {
	background-color: #fff;
	height: 60rpx;
	line-height: 60rpx;
	padding: 0 29rpx;
	margin: 0 30rpx;
	font-size: 24rpx;
	border-radius: 8rpx;
	display: flex;
	
	.l {
		flex-grow: 1;
	}
	
	.tit {
		color: #0363CA;
	}
	
	.sel_text {
		color: #0D0D0D;
	}
	
	.r image {
		width: 10rpx;
		height: 20rpx;
	}
}

.main {
	background-color: #fff;
	padding: 10rpx 30rpx;
}

.scan_btn {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 76rpx;
	border: 1px solid #0FDA9B;
	border-radius: 38rpx;
	font-size: 32rpx;
	color: #0FDA9B;
	margin-top: 22rpx;
	
	image {
		width: 50rpx;
		height: 37rpx;
		margin-right: 13rpx;
	}
}

.newuserguide {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 482rpx;
	
	.doctor {
		image {
			width: 145rpx;
			height: 272rpx;
		}
	}
	
	.guide {
		text-align: right;
		margin-left: 50rpx;

		.tit {
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
			line-height: 50rpx;
		}
		
		.item {
			font-size: 28rpx;
			line-height: 45rpx;
			color: #999;
		}
		
		.i {
			width: 18rpx;
			height: 18rpx;
			margin-right: 5rpx;
		}
	
		.curr {
			color: #0077F9;
		}
	}
}
</style>